<!--
 * @Descripttion: 项目询价
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-10-15 10:33
 * @LastEditors: a12
 * @LastEditTime: 2020-10-15 10:33
-->
<template>
  <div class="page-box">
    <div class="page-box-content">
      <!--  搜索条件  -->
      <el-form :model="formInfo" ref="queryForm" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="询价时间" prop="timeArr">
              <el-date-picker
                  class="order-filter-date"
                  style="width:100%"
                  v-model="formInfo.timeArr"
                  type="daterange"
                  range-separator="—"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目编号" prop="projectNo">
              <el-input v-model="formInfo.projectNo" placeholder="项目编号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="formInfo.projectName" placeholder="项目名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="text-align: right">
          <el-form-item>
            <el-button type="" @click="resetForm('queryForm')">重置</el-button>
            <el-button type="primary" @click="onQuery()">查询</el-button>
          </el-form-item>
        </el-col>
        </el-row>
      </el-form>
      <!-- 列表 -->
      <el-table
          :data="tableData"
          style="width: 100%"
          border>
        <el-table-column type="index" width="60" label="序号"></el-table-column>
        <el-table-column prop="projectNo" label="项目编号" width="140"></el-table-column>
        <el-table-column label="项目名称" width="140">
          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover">
              <div class="cell-content">{{scope.row.projectName}}</div>
              <p class="overflow" slot="reference">{{scope.row.projectName}}</p>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="purchaseTypeCName" label="采购方式"></el-table-column>
        <el-table-column prop="projectStateCName" label="项目状态"></el-table-column>
        <el-table-column prop="biddingStateCName" label="报价状态"></el-table-column>
        <el-table-column label="询价开始时间" min-width="160">
          <template slot-scope="scope">
            {{scope.row.startTime | formeTime}}
          </template>
        </el-table-column>
        <el-table-column label="询价结束时间"  min-width="160">
          <template slot-scope="scope">
            {{scope.row.endTime | formeTime}}
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="240">
          <template slot-scope="scope">
            <!-- 开始询价 项目状态：倒计时/正在询价， 竞价状态：1 参与询价， 0 撤销询价 null 未参与 -->
            <el-button v-if="['00026_0','00026_1'].includes(scope.row.projectState) && scope.row.biddingState  !== '0'" @click="joinProject(scope.row)" type="primary" size="small" plain>参与询价</el-button>
            <el-button @click="viewProject(scope.row)" type="primary" size="small" plain>询价查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="set-pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
      <!-- 询价承诺 -->
      <el-dialog
          title="网上询价供应商服务承诺"
          :visible.sync="dialogVisible"
          :show-close="false"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          width="68%"
          :center="true">
        <div class="promise-block">
          <div>
            <h3 class="promise-box-item primary">网上询价供应商应自觉遵守鞍钢采购商城的相关规则，诚实守信、合法经营，积极参与网上询价，承诺履行下列服务标准。</h3>
            <h3 class="promise-box-item primary-c">1.完全响应询价公告的要求，并具有相应的供货能力。</h3>
            <h3 class="promise-box-item primary-c">2.在参与询价期间严格遵守询价规则，保持自身询价行为的独立性，严肃性，避免和抵制相互操纵、互相串通等不良行为。</h3>
            <h3 class="promise-box-item primary-c">3.提供正规渠道、符号采购需求的商品，按照采购方要求进行配送、安装、调试等工作，确保商品运行正常。</h3>
            <h3 class="promise-box-item primary-c">4.严格按照双方达成的供货价格承诺、质量承诺和售后服务承诺履行义务。</h3>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="success" @click="agreeEnquiry">同意</el-button>
          <el-button type="warning" @click="dialogVisible = false">不同意</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { queryDictionaryList } from '@/api/common.api'
  import {pageQuerySupplierBiddingProjectsList} from '@/api/supplier.api'
  import moment from 'moment'
  export default {
    name: 'bid',
    components: {},
    data() {
      return {
        formInfo:{
          timeArr:[],
          projectNo:'',
          projectName:''
        },
        tableData:[],
        currentPage:1,
        pageSize: 10,
        total: 0,
        stateList:[],
        dialogVisible:false,
        projectId: ''
      }
    },
    watch: {},
    computed: {},
    filters: {
      formeTime(val){
        return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
      }
    },
    created() {
      // 查询项目状态
      this.queryProjectStatusListFn()
      // 查询项目询价列表
      this.queryPageProBiddingListFn()
    },
    mounted() {
    },
    methods: {
      // 参与询价
      joinProject (row) {
        this.projectId = row.projectId
        this.dialogVisible = true
      },
      viewProject(row) {
        this.$router.push({path:'view-details',query:{projectId: row.projectId }})
      },
      // 同意承诺参与询价
      agreeEnquiry () {
        this.dialogVisible = false
        this.$router.push({path:'join-bid',query:{projectId: this.projectId}})
      },
      // 每页条数
      handleSizeChange(val) {
        this.pageSize = val
        this.queryPageProBiddingListFn()
      },
      // 当前页
      handleCurrentChange(val) {
        this.currentPage = val
        this.queryPageProBiddingListFn()
      },
      /**
       * @description 查询项目询价列表
       * @author 穆宏宇
       * @date 2020-10-13 18:11:45
       * @param
       * @return
       * */
      queryPageProBiddingListFn() {
        const params = {
          projectNo:this.formInfo.projectNo,
          state:this.formInfo.state,
          projectName:this.formInfo.projectName,
          current:this.currentPage,
          size:this.pageSize,
          startTime: (this.formInfo.timeArr &&  this.formInfo.timeArr.length) > 0 ? this.formInfo.timeArr[0] : '',
          endTime: (this.formInfo.timeArr &&  this.formInfo.timeArr.length) ? this.formInfo.timeArr[1] : ''
        }
        pageQuerySupplierBiddingProjectsList(params).then(res=>{
          this.tableData = res.records
          this.total = res.total
        })
      },
      /**
       * @description 查询项目状态
       * @author 穆宏宇
       * @date 2020-10-13 10:19:10
       * @param
       * @return
       * */
      queryProjectStatusListFn () {
        const param = {dictionaryType: 'project_status'}
        queryDictionaryList(param).then(res=>{
          this.stateList = res
        })
      },
      /**
       * @description 重置查询
       * @author 穆宏宇
       * @date 2020-10-13 10:11:14
       * @param
       * @return
       * */
      resetForm (formName) {
        this.$refs[formName].resetFields();
      },
      /**
       * @description 查询
       * @author 穆宏宇
       * @date 2020-10-13 10:11:27
       * @param
       * @return
       * */
      onQuery () {
        this.queryPageProBiddingListFn()
      }
    }
  }
</script>

<style scoped lang="scss">
  .page-box {
    padding: 20px;
    &-content {
      padding: 20px;
      background: white;
      .el-range-editor, .el-select, .el-input {
        width: 80% !important;
      }
      .set-pagination {
        text-align: right;
      }
    }
  }
  ::v-deep.el-dialog{
    display: flex;
    flex-direction: column;
    margin:0 !important;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    /*height:600px;*/
    max-height:calc(100% - 30px);
    max-width:calc(100% - 30px);
  }

  .promise-box {
    display: flex;
    justify-content: center;
    /*height: 220px !important;*/
    &-item {
      width: 900px;
      margin: 0 auto;
      text-align: left;
    }
  }
  .primary {
    padding-bottom: 20px;
  }
  .primary-c {
    padding: 10px 0;
  }
  .cell-content {
    width: 200px;
    min-height: 20px;
    max-height: 200px;
    overflow-y: auto;
  }
  .overflow {
    width: 118px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
    overflow: hidden;
  }
</style>
